<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>



<script src='js/box2d/common/b2Settings.js'></script> 
<script src='js/box2d/common/math/b2Vec2.js'></script> 
<script src='js/box2d/common/math/b2Mat22.js'></script> 
<script src='js/box2d/common/math/b2Math.js'></script> 
<script src='js/box2d/collision/b2AABB.js'></script> 
<script src='js/box2d/collision/b2Bound.js'></script> 
<script src='js/box2d/collision/b2BoundValues.js'></script> 
<script src='js/box2d/collision/b2Pair.js'></script> 
<script src='js/box2d/collision/b2PairCallback.js'></script> 
<script src='js/box2d/collision/b2BufferedPair.js'></script> 
<script src='js/box2d/collision/b2PairManager.js'></script> 
<script src='js/box2d/collision/b2BroadPhase.js'></script> 
<script src='js/box2d/collision/b2Collision.js'></script> 
<script src='js/box2d/collision/Features.js'></script> 
<script src='js/box2d/collision/b2ContactID.js'></script> 
<script src='js/box2d/collision/b2ContactPoint.js'></script> 
<script src='js/box2d/collision/b2Distance.js'></script> 
<script src='js/box2d/collision/b2Manifold.js'></script> 
<script src='js/box2d/collision/b2OBB.js'></script> 
<script src='js/box2d/collision/b2Proxy.js'></script> 
<script src='js/box2d/collision/ClipVertex.js'></script> 
<script src='js/box2d/collision/shapes/b2Shape.js'></script> 
<script src='js/box2d/collision/shapes/b2ShapeDef.js'></script> 
<script src='js/box2d/collision/shapes/b2BoxDef.js'></script> 
<script src='js/box2d/collision/shapes/b2CircleDef.js'></script> 
<script src='js/box2d/collision/shapes/b2CircleShape.js'></script> 
<script src='js/box2d/collision/shapes/b2MassData.js'></script> 
<script src='js/box2d/collision/shapes/b2PolyDef.js'></script> 
<script src='js/box2d/collision/shapes/b2PolyShape.js'></script> 
<script src='js/box2d/dynamics/b2Body.js'></script> 
<script src='js/box2d/dynamics/b2BodyDef.js'></script> 
<script src='js/box2d/dynamics/b2CollisionFilter.js'></script> 
<script src='js/box2d/dynamics/b2Island.js'></script> 
<script src='js/box2d/dynamics/b2TimeStep.js'></script> 
<script src='js/box2d/dynamics/contacts/b2ContactNode.js'></script> 
<script src='js/box2d/dynamics/contacts/b2Contact.js'></script> 
<script src='js/box2d/dynamics/contacts/b2ContactConstraint.js'></script> 
<script src='js/box2d/dynamics/contacts/b2ContactConstraintPoint.js'></script> 
<script src='js/box2d/dynamics/contacts/b2ContactRegister.js'></script> 
<script src='js/box2d/dynamics/contacts/b2ContactSolver.js'></script> 
<script src='js/box2d/dynamics/contacts/b2CircleContact.js'></script> 
<script src='js/box2d/dynamics/contacts/b2Conservative.js'></script> 
<script src='js/box2d/dynamics/contacts/b2NullContact.js'></script> 
<script src='js/box2d/dynamics/contacts/b2PolyAndCircleContact.js'></script> 
<script src='js/box2d/dynamics/contacts/b2PolyContact.js'></script> 
<script src='js/box2d/dynamics/b2ContactManager.js'></script> 
<script src='js/box2d/dynamics/b2World.js'></script> 
<script src='js/box2d/dynamics/b2WorldListener.js'></script> 
<script src='js/box2d/dynamics/joints/b2JointNode.js'></script> 
<script src='js/box2d/dynamics/joints/b2Joint.js'></script> 
<script src='js/box2d/dynamics/joints/b2JointDef.js'></script> 
<script src='js/box2d/dynamics/joints/b2DistanceJoint.js'></script> 
<script src='js/box2d/dynamics/joints/b2DistanceJointDef.js'></script> 
<script src='js/box2d/dynamics/joints/b2Jacobian.js'></script> 
<script src='js/box2d/dynamics/joints/b2GearJoint.js'></script> 
<script src='js/box2d/dynamics/joints/b2GearJointDef.js'></script> 
<script src='js/box2d/dynamics/joints/b2MouseJoint.js'></script> 
<script src='js/box2d/dynamics/joints/b2MouseJointDef.js'></script> 
<script src='js/box2d/dynamics/joints/b2PrismaticJoint.js'></script> 
<script src='js/box2d/dynamics/joints/b2PrismaticJointDef.js'></script> 
<script src='js/box2d/dynamics/joints/b2PulleyJoint.js'></script> 
<script src='js/box2d/dynamics/joints/b2PulleyJointDef.js'></script> 
<script src='js/box2d/dynamics/joints/b2RevoluteJoint.js'></script> 
<script src='js/box2d/dynamics/joints/b2RevoluteJointDef.js'></script>

<script>


<canvas id="c" width="640" height="480" style="border: 1px solid black"></canvas>
  
    <script>
   
    
	
	
    
    document.body.appendChild(stats.domElement);
    
    var canvas = document.getElementById("c");
    var ctx = canvas.getContext("2d");
  
    var world;
  
    function init() {
       var   b2Vec2 = Box2D.Common.Math.b2Vec2
        , b2BodyDef = Box2D.Dynamics.b2BodyDef
        , b2Body = Box2D.Dynamics.b2Body
        , b2FixtureDef = Box2D.Dynamics.b2FixtureDef
        , b2Fixture = Box2D.Dynamics.b2Fixture
        , b2World = Box2D.Dynamics.b2World
        , b2MassData = Box2D.Collision.Shapes.b2MassData
        , b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape
        , b2CircleShape = Box2D.Collision.Shapes.b2CircleShape
        , b2DebugDraw = Box2D.Dynamics.b2DebugDraw
          ;
     
       world = new b2World(
             new b2Vec2(0, 10)    //gravity
          ,  true                 //allow sleep
       );
       
       var SCALE = 30;
     
       var fixDef = new b2FixtureDef;
       fixDef.density = 1.0;
       fixDef.friction = 0.5;
       fixDef.restitution = 0.2;
     
       var bodyDef = new b2BodyDef;
     
       //create ground
       bodyDef.type = b2Body.b2_staticBody;
       
       // positions the center of the object (not upper left!)
       bodyDef.position.x = canvas.width / 2 / SCALE;
       bodyDef.position.y = (canvas.height / SCALE) - 1;
       
       fixDef.shape = new b2PolygonShape;
       
       // half width, half height. eg actual height here is 1 unit
       fixDef.shape.SetAsBox((canvas.width / SCALE) / 2, 0.5 / 2);
       world.CreateBody(bodyDef).CreateFixture(fixDef);
     
       //create dynamic circle object
       bodyDef.type = b2Body.b2_dynamicBody;
       fixDef.shape = new b2CircleShape(
          Math.random() + 0.1 //radius
       );
       bodyDef.position.x = Math.random() * 25;
       bodyDef.position.y = Math.random() * 10;
       world.CreateBody(bodyDef).CreateFixture(fixDef);
       
       // create dynamic polygon object
       bodyDef.type = b2Body.b2_dynamicBody;
       fixDef.shape = new b2PolygonShape;
       fixDef.shape.SetAsBox(
             Math.random() + 0.1 //half width
          ,  Math.random() + 0.1 //half height
       );
       bodyDef.position.x = Math.random() * 25;
       bodyDef.position.y = Math.random() * 10;
       world.CreateBody(bodyDef).CreateFixture(fixDef);
     
       //setup debug draw
       var debugDraw = new b2DebugDraw();
       debugDraw.SetSprite(document.getElementById("c").getContext("2d"));
       debugDraw.SetDrawScale(SCALE);
       debugDraw.SetFillAlpha(0.3);
       debugDraw.SetLineThickness(1.0);
       debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
       world.SetDebugDraw(debugDraw);
     
       // restart
       setTimeout(init, 3000);
    }; // init()
  
    function update() {
       world.Step(
             1 / 60   //frame-rate
          ,  10       //velocity iterations
          ,  10       //position iterations
       );
       world.DrawDebugData();
       world.ClearForces();
     
       stats.update();
       requestAnimFrame(update);
    }; // update()
  
    init();
    requestAnimFrame(update);
    
    </script>


</script>
</body>
</html>